<template>
  <div class="app-container">
    <el-tabs v-model="activeTab" @tab-click="handleTabClick">
      <el-tab-pane label="配送异常订单" name="abnormal"></el-tab-pane>
      <!-- <el-tab-pane label="历史订单" name="history"></el-tab-pane> -->
      <el-tab-pane label="全部订单" name="all"></el-tab-pane>
    </el-tabs>

    <!-- 使用 v-show 提高性能 -->
    <div v-show="activeTab === 'abnormal'">
      <AbnormalOrderList />
    </div>

    <div v-show="activeTab === 'all'">
      <AllOrderList />
    </div>
  </div>
</template>

<script setup name="OrderDelivery">
import { ref } from 'vue'
import AbnormalOrderList from './AbnormalOrderList.vue'
import HistoryOrderList from './HistoryOrderList.vue'
import AllOrderList from './AllOrderList.vue'

const activeTab = ref('abnormal')

function handleTabClick(tab) {
  // 这里可以做切换时的逻辑处理
  console.log('当前tab:', tab.name)
  // 根据需要触发其他操作，比如刷新组件数据等
}
</script>

<style scoped>
.app-container {
  padding: 20px;
}
</style>
